<template>
<div>
<el-container>
    <el-main>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover" >
              <el-button type="text" size="medium" @click="unpostlist">未上报</el-button >
              <div class="wgt_number unpost">{{unpostnum}}</div>
         </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" >
              <el-button type="text" size="medium" @click="postlist">已上报</el-button >
              <div class="wgt_number post">{{postnum}}</div>
          </el-card>
        </el-col>
      </el-row>
      <el-button @click="getExcel()" type="text" size="mdeium" style="float:right;">导出excel</el-button>
      <Postlist :tableData="showPage"/>
      <div class="block" style="margin:30px 30px 30px 30px;">
          <el-pagination
           @current-change="handlePageChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="this.tableData.length/pageSize+1">
          </el-pagination>
      </div>
    </el-main>
</el-container>
</div>
</template>

<script>
import Postlist from './Postlist.vue'
import axios from 'axios'
export default {
  components: { Postlist },
  name: 'Overview',
  component: {
    Postlist
  },
  methods: {
    getExcel () {
      axios({
        withCredentials: true,
        method: 'post',
        url: '/admin/data.csv',
        responseType: 'blob',
        timeout: 4000,
        data: this.tableData
      }).then((res) => {
        console.log(res)
        let url = window.URL.createObjectURL(new Blob([res.data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', 'data.csv')
        document.body.appendChild(link)
        link.click()
      }, ErrorEvent => {
        this.$message('请求数据失败')
      })
    },
    addScriptTag (src) {
      var script = document.createElement('script')
      script.setAttribute('type', 'text/javascript')
      script.src = src
      document.body.appendChild(script)
    },
    getOverview () {
      axios({
        withCredentials: true,
        maxRedirects: 0,
        method: 'get',
        url: '/admin/getOverview',
        timeout: 4000
      }).then((res) => {
        console.log(res)
        this.postnum = res.data.postnum
        this.unpostnum = res.data.unpostnum
        this.postList = res.data.postList
        this.unpostList = res.data.unpostList
        this.tableData = res.data.unpostList
        this.pageslice()
      }, ErrorEvent => {
        this.$message('请求数据失败')
      })
    },
    pageslice () {
      this.totalItem = this.tableData.length
      let wholeTable = this.tableData
      this.allPages = []
      for (let i = 0; i < wholeTable.length; i += this.pageSize) {
        this.allPages.push(wholeTable.slice(i, i + this.pageSize))
      }
      if (this.allPages.length > 0) {
        this.showPage = this.allPages[0]
      } else {
        this.showPage = []
      }
    },
    postlist () {
      this.tableData = this.postList
      console.log(this.postList)
      this.pageslice()
    },
    unpostlist () {
      this.tableData = this.unpostList
      this.pageslice()
    },
    showpage (val) {
      console.log(val)
    },
    handlePageChange (val) {
      this.currentPage = val
      this.showPage = this.allPages[this.currentPage - 1]
    }
  },
  created () {
    this.getOverview()
  },
  data () {
    return {
      unpostList: [],
      postList: [],
      tableData: [],
      currentPage: 1,
      totalItem: 0,
      pageSize: 2,
      showPage: [],
      allPages: [],
      unpostnum: 0,
      postnum: 0
    }
  }
}
</script>

<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
.wgt_number{
    display: block;
    font-size: 190%;
    font-style: normal;
    font-weight: bold;
    padding-bottom: 3px;
}
 .unpost{
   color: crimson;
 }
 .post{
   color:limegreen;
 }
</style>
